<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="/ftl/css/bootstrap.min.css">
<link rel="stylesheet" href="/ftl/css/laypage.css">

<script src="/ftl/js/vue/vue.min.js"></script>
<script src="/ftl/js/jquery/jquery.min.js"></script>
<script src="/ftl/js/laypage/laypage.js" charset="utf-8"></script>
<script src="/ftl/js/layer/layer.js" charset="utf-8"></script>
</head>
<body>
	<div id="app" class="container">
		${Session["user"].userName}����ӭ��
		<div class="table-responsive">		
		 	<table class="table">
		 		<thead>
					<tr class="success">						
						<td>�û�</td>		
						<td>����</td>				
						<td>����</td>
					</tr>
				</thead>
				<tbody>
					<tr class="active" v-for="(item,index) in result">
 						<td>{{item.userName}}</td>
						<td>{{item.age}}</td>
						<td><a href="/del/{{item.id}}">ɾ��</a></td>						
					</tr>
				</tbody>
				<tr>
					<td colspan="3" align="center"><div id="pagenav"></div></td>
				</tr>
			</table>
			
		</div>
	</div>
	<script>
		var app = new Vue({
			el : '#app',
			data : {
				result : []
			}
		});
	
	
		//��ѯ�û�����
		var getUserPageList = function(curr) {
			$.ajax({
				type : "GET",
				dataType : "json",
				url : "/getPage",
				data : {
					pageNum:curr || 1,
					pageSize:8
				},
				success : function(msg) {
					app.result=msg;
					laypage({
  cont: 'pagenav', //容器。值支持id名、原生dom对象，jquery对象,
  pages: 100, //总页数
  skip: true, //是否开启跳页
  skin: '#AF0000',
  curr:curr || 1, 
  groups: 3, //连续显示分页数
  jump: function(obj, first){ //触发分页后的回调
        if(!first){ //点击跳页触发函数自身，并传递当前页：obj.curr
          getUserPageList(obj.curr);
        }
      }
});
				}
			});
		}
		
		getUserPageList();

		//��Ⱦ��ҳ
	
	
	
		
		
	</script>
	
	
</body>
</html>